<template>
  <Panel>
    <template #title>
      <span>修改密码</span>
    </template>
    <template>
      <el-form
        :model="passForm"
        status-icon
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
        size="small"
      >
        <!-- 原密码 -->
        <el-form-item label="原密码" prop="oldPass">
          <el-input
            type="password"
            v-model="passForm.oldPass"
            autocomplete="off"
            @blur="checkOldPwd"
          ></el-input>
        </el-form-item>
        <!-- 新密码 -->
        <el-form-item label="新密码" prop="newPass">
          <el-input
            type="password"
            v-model="passForm.newPass"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <!-- 确认新密码 -->
        <el-form-item label="确认新密码" prop="checkPass">
          <el-input
            type="password"
            v-model="passForm.checkPass"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <!-- 添加重置 -->
        <el-form-item>
          <el-button
            type="primary"
            :loading="editFlag"
            @click="submitForm('ruleForm')"
            >保存</el-button
          >
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </template>
  </Panel>
</template>

<script>
import {
  validatePasswad,
  validateCheckPass,
  validateNewPass
} from '@/utils/validator.js'
import { checkOld, editPass } from '../../api/users.js'
import local from '../../utils/local.js'
// import local from '../../utils/local'
export default {
  data() {
    return {
      passForm: {
        oldPass: '',
        newPass: '',
        checkPass: ''
      },
      rules: {
        oldPass: [{ validator: validatePasswad, trigger: 'blur' }],
        newPass: [
          { validator: validateNewPass('新密码', this), trigger: 'blur' }
        ],
        checkPass: [
          { validator: validateCheckPass('确认新密码', this), trigger: 'blur' }
        ]
      },
      passFlag: false,
      editFlag: false
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(async valid => {
        if (valid) {
          if (this.passFlag) {
            const { code, msg } = await editPass({
              newPwd: this.passForm.newPass
            })
            if (code === 0) {
              this.editFlag = true
              this.$message.success(msg)
              setTimeout(() => {
                local.clr()
                location.reload()
                this.editFlag = false
              }, 3000)
            }
          } else {
            this.$message.error('原密码错了')
            this.editFlag = true
            setTimeout(() => {
              this.editFlag = false
            }, 3000)
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    // 验证原密码
    async checkOldPwd() {
      if (this.passForm.oldPass === '') return
      const { code } = await checkOld({
        oldPwd: this.passForm.oldPass
      })
      if (code === '00') {
        this.passFlag = true
      } else {
        this.passFlag = false
      }
    }
  }
}
</script>

<style lang="less" scoped>
.el-select {
  width: 200px;
}
.el-input {
  width: 200px;
}
</style>
